import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

import { createHtmlPlugin } from 'vite-plugin-html'

// https://vitejs.dev/config/
export default defineConfig({
  // base: '/manager', // 默认就是 /
  plugins: [
    // -------1. 配置vue的插件
    vue({
      reactivityTransform: true
    }),
    // -------2. 配置自动导入组件的插件
    // 伏笔: 一旦配置好了该插件, 定义在components文件夹下的所有全局组件都可以不用导入就直接使用了
    Components({
      // 2.0 在解析的过程中, 是否去生成类型声明文件
      // 不需要, 因为vant中已经生成过了
      dts: false,
      // 2.1 配置解析器
      // 作用: 该解析器可用去解析对应UI组件库的组件
      // VantResolver: 专门解析vant组件库的组件的, 还有: Element, AntD
      // 是否需要引入样式: 不需要 (已经在全局导入)
      resolvers: [VantResolver({ importStyle: false })]
    }),
    // ----------3. 配置svg雪碧图插件
    createSvgIconsPlugin({
      // 指定图标文件夹，绝对路径（NODE代码）
      // path.resolve() 将路径或路径片段的序列解析为绝对路径
      // process.cwd() 返回 项目的根目录
      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
    }),
    // ------------4. 配置注册html文件环境变量插件--------
    createHtmlPlugin()
  ],
  resolve: {
    // 别名
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 80, // 本地服务器的启动端口
    host: true,
    open: true
  }
})
